import React from 'react';
import {View, TextInput, TouchableOpacity, Platform} from 'react-native';
import PropTypes from  'prop-types';
import {Ticon} from "react-native-ticon";

export default class SearchBar extends React.Component{

    static propTypes = {
        onPress:PropTypes.func,
        editable:PropTypes.bool,
        barStyle:PropTypes.object,
        placeholderTextColor:PropTypes.string
    };

    static defaultProps = {
        onPress:()=>null,
        editable:true,
        barStyle:{},
        placeholderTextColor:'#999'
    };

    render() {
        return (
            <View style={{
                flex:1,
                backgroundColor:'#f2f2f2',
                height:30,
                borderRadius:15,
                overflow:'hidden',
                paddingLeft:10,
                paddingRight:10,
                paddingTop:0,
                paddingBottom:0,
                ...this.props.barStyle
            }}>
                <View style={{flexDirection:'row', flex:1}}>
                    <View style={{marginRight:5, alignItems:'center', alignSelf:'center'}}>
                        <Ticon
                            name={"search-light"}
                            size={20}
                            color={this.props.placeholderTextColor}
                        />
                    </View>
                    <View style={{
                        flex:1,
                        position:'relative'
                    }}>
                        {this.renderTextField()}
                    </View>
                </View>
            </View>
        );
    }

    renderTextField = () => {
        if (Platform.OS === 'ios') {
            return (
                <View style={{flex:1}}>
                    <TextInput
                        placeholder={"搜索关键字"}
                        placeHolderTextColor={this.props.placeholderTextColor}
                        style={{
                            borderWidth:0,
                            padding:0,
                            paddingVertical:0,
                            paddingHorizontal:0,
                            paddingStart:0,
                            paddingEnd:0,
                            textAlignVertical:'center',
                            fontSize:14,
                            lineHeight:18,
                            fontWeight:'400',
                            color:'#333',
                            marginLeft:0,
                            marginRight:0,
                            flex:1
                        }}
                        underlineColorAndroid={"transparent"}
                        returnKeyType={"search"}
                        returnKeyLabel={"搜索"}
                        enablesReturnKeyAutomatically={true}
                        {...this.props}
                    />
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={this.props.onPress}
                        style={{
                            position:'absolute',
                            left:0,
                            right:0,
                            top:0,
                            bottom:0,
                            display:this.props.editable ? 'none' : 'flex'
                        }}
                    />
                </View>
            );
        } else {
            return (
                <TouchableOpacity
                    style={{
                        flex:1,
                        height:30
                    }}
                    activeOpacity={1}
                    onPress={this.props.onPress}
                >
                    <TextInput
                        placeholder={"搜索关键字"}
                        placeHolderTextColor={this.props.placeholderTextColor}
                        style={{
                            borderWidth:0,
                            padding:0,
                            paddingVertical:0,
                            paddingHorizontal:0,
                            paddingStart:0,
                            paddingEnd:0,
                            textAlignVertical:'center',
                            fontSize:14,
                            lineHeight:14,
                            fontWeight:'400',
                            color:'#333',
                            marginLeft:0,
                            marginRight:0,
                            flex:1
                        }}
                        underlineColorAndroid={"transparent"}
                        returnKeyType={"search"}
                        returnKeyLabel={"搜索"}
                        enablesReturnKeyAutomatically={true}
                        {...this.props}
                    />
                </TouchableOpacity>
            );
        }
    }
}
